<template>
<div class="wh-login">
  <div class="wh-lg-main">
    <div>登录</div>
    <div class="wh-lg-context">
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol" :model="loginInfo"  @submit="submit" @submit.native.prevent>
          <a-form-item >
            <a-input class="wh-form-item" v-model:value="loginInfo.userName" placeholder="Username">
              <template #prefix><UserOutlined style="color:rgba(0,0,0,.25)"/></template>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input v-model:value="loginInfo.password" type="password" placeholder="Password">
              <template #prefix><LockOutlined style="color:rgba(0,0,0,.25)"/></template>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button
              type="primary"
              html-type="submit"
              :disabled="loginInfo.userName === '' || loginInfo.password === ''"
            >
              Log in
            </a-button>

            <a-button style="margin-left: 10px;" 
              :disabled="loginInfo.userName === '' || loginInfo.password === ''"
              @click="reset">
            Reset
          </a-button>
          </a-form-item>
        </a-form>
    </div>
  </div>
</div>
</template>

<script lang="ts">
import { log } from 'util';
import {defineComponent,onMounted, ref,reactive} from 'vue';
import { LoginUser } from '/@/service/Login';
export default defineComponent({
    name: 'Login',
    setup(){
        /**
         * 用户信息
         */
        let loginInfo: LoginUser = reactive({
          userName:'',
          password:''
        })


        /**
         * 重置登录信息
         */
        function reset(): void{
            console.log('info' , loginInfo);
            loginInfo.userName = '';
            loginInfo.password = '';
        }

        function submit(){
            console.log("1");
            return "1";
        }


        return {
          loginInfo
          ,submit
          ,reset
          ,labelCol: { span: 4 }
          ,wrapperCol: { span: 24 }
          
        }
    }
});
</script>

<style>
  .wh-login {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    background: url(../../assets/bj2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 0;
  }
  .wh-lg-main{
      position: absolute;
      top : 35%;
      bottom: 35%;
      left: 35%;
      right: 35%;
      border: 1px rgb(160, 160, 212) solid;
      border-radius: 25px 10px;
      box-shadow:5px 10px 50px #00000080;
  }
  .wh-lg-context{
    padding: 10px;
    width: 100%;
  }
  .wh-form-item{
    width: 100%;
  }
</style>